<template>
    <div class="three">
        <TopBar class="t" :url="'/two'"></TopBar>
        <div class="box">
            <h2>选择您的健身经验</h2>
            <div class="container">
                <div class="card">
                    <h2>健身小白</h2>
                    <p>毫无健身经验，需要详细推荐和指导</p>
                </div>
            </div>
            <div  class="container">
                <div class="card">
                    <h2>健身爱好者</h2>
                    <p>适合有健身经验的用户选择</p>
                </div>
            </div>

            <div  class="container">
                <div class="card">
                    <h2>健身教练</h2>
                    <p>可以定制课程并出售，获取报酬</p>
                </div>
            </div>

            <button @click="next">下一步 (3/3)</button>
        </div>
    </div>
</template>

<script>
    import TopBar from "../../component/TopBar";
    export default {
        name: "Step2",
        data(){
            return{
                state:null,
                canvasWidth:0,
                canvasHeight:0
            }
        },
        methods:{
            next(){
                this.$router.push('/index/motion/motion-plan')
            },
        },
        components:{
            TopBar
        },
    }
</script>

<style lang="stylus" scoped>
    .three
        width 100vw
        height 100vh
        background-color #ffffff
        text-align center
        .box
            text-align center
            .container
              padding-top 0.04rem
              margin 0.4rem 0.3rem 0 0.3rem
              width 3rem
              height 0.5rem
              border 0.01rem solid #AAB2BD
              background-color #ffffff
              border-radius 0.2rem
              &:nth-of-type(1)
                border 0.01rem solid transparent
                color #ffffff
                background-color  #8C7DF4
                h2
                  color #ffffff
                p
                  color #ffffff

              h2
                color black
                font-size 0.145rem
              p
                color #cccccc
                font-size 0.12rem
            > h2
                margin-top 0.2rem
                font-size 0.16rem
                font-weight 300
                &:nth-of-type(2)
                    margin-top 1.1rem
            button
                background-color #6739FE
                width 3.3rem
                height 0.45rem
                border-radius 0.2rem
                color #ffffff
                font-size 0.14rem
                font-weight 600
                border none
                cursor pointer
                margin-top 2.4rem
        .t
            padding 0.2rem 0 0 0.2rem
</style>